<template>
  <div class="box-full overflow-hidden">
    <Mobile v-if="device === 'mobile'" />
    <Pc v-else-if="device === 'pc'" />
  </div>
</template>
<script setup>
import Mobile from './mobile/index.vue'
import Pc from './pc/index.vue'

defineOptions({ name: 'dataStatistics' })
const device = ref()
const is_mobi =
  navigator.userAgent
    .toLowerCase()
    .match(/(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null
device.value = is_mobi ? 'mobile' : 'pc'
</script>
<style lang="scss" scoped>
.color-bg-1 {
  background: var(--color-bg-1);
}
.center-tab {
  border-left: 1px solid rgb(var(--primary-6));
  border-right: 1px solid rgb(var(--primary-6));
}
.screen-box {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  :deep(.arco-select-view, .arco-picker) {
    border: none;
  }
  :deep(.arco-divider-vertical) {
    margin: 0;
  }
}
:deep(.arco-card-header) {
  border: none;
}
</style>
